<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-form ref="formRef" :model="formModel" :rules="rules">
      <a-tabs position="left" type="rounded" lazy-load>
        <a-tab-pane key="1" title="上传设置">
          <a-form-item field="storage" label="存储方式" label-col-flex="120px">
            <a-radio-group v-model="formModel.storage" @change="storageChange">
              <a-radio v-for="(item, index) in storages" :key="index" :value="index">
                <template #radio="{ checked }">
                  <a-space
                    align="start"
                    class="custom-radio-card"
                    :class="{ 'custom-radio-card-checked': checked }"
                  >
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot" />
                    </div>
                    <div>
                      <div className="custom-radio-card-title">{{ item }}</div>
                    </div>
                  </a-space>
                </template>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <template v-if="formModel.storage === 'qiniu'">
            <a-form-item label="" label-col-flex="120px">
              <a-card title="">
                文件将上传到七牛云 Kodo 存储，对象存储 > 空间管理 > 空间设置 > 访问控制, 设置为 公开空间。<br />
                需要配置跨域访问 CORS 规则，设置：来源 Origin 为 *，允许 Methods 为 GET,POST，允许 Headers 为 *。
              </a-card>
            </a-form-item>
            <a-form-item
              field="qiniu.accesskey"
              label="AccessKey"
              label-col-flex="120px"
              required
            >
              <a-input v-model="formModel.qiniu.accesskey" placeholder="" style="width: 60%"/>
              <template #extra>
                <div>AccessKey（AK） 在 [ 七牛云 > 个人中心 > 密钥管理 ] 设置和获取</div>
              </template>
            </a-form-item>
            <a-form-item
              field="qiniu.secretkey"
              label="SecretKey"
              label-col-flex="120px"
              required
            >
              <a-input v-model="formModel.qiniu.secretkey" placeholder="" style="width: 60%"/>
              <template #extra>
                <div>SecretKey（SK） 在 [ 七牛云 > 个人中心 > 密钥管理 ] 设置和获取</div>
              </template>
            </a-form-item>
            <a-form-item
              field="qiniu.bucket"
              label="空间名称"
              label-col-flex="120px"
              required
            >
              <a-input v-model="formModel.qiniu.bucket" placeholder="" style="width: 60%"/>
              <template #extra>
                <div>空间名称 在 [ 七牛云 > 对象存储 > 空间管理] 设置和获取</div>
              </template>
            </a-form-item>
            <a-form-item
              field="qiniu.url"
              label="外链域名"
              label-col-flex="120px"
              required
            >
              <a-input v-model="formModel.qiniu.url" placeholder="" style="width: 60%"/>
              <template #extra>
                <div>外链域名 在 [ 七牛云 > 对象存储 > 空间管理 > 域名设置 ] 设置和获取</div>
              </template>
            </a-form-item>
          </template>
          <template v-else-if="formModel.storage === 'aliyun'">
            <a-form-item label="" label-col-flex="120px">
              <a-card title="">
                文件将上传到阿里云 OSS 存储，需要配置 OSS 公开访问及跨域策略。<br />
                需要配置跨域访问 CORS 规则，设置：来源 Origin 为 *，允许 Methods 为 GET,POST，允许 Headers 为 *。
              </a-card>
            </a-form-item>
            <a-form-item field="aliyun.access_key_id" label="AccessKey ID" label-col-flex="120px">
              <a-input v-model="formModel.aliyun.access_key_id" placeholder="" style="width: 60%"/>
              <template #extra>
                <div>AccessKey ID 在 [ 阿里云 > 个人中心 > AccessKey 管理 ] 设置和获取</div>
              </template>
            </a-form-item>
            <a-form-item field="aliyun.access_key_secret" label="AccessKey Secret" label-col-flex="120px">
              <a-input v-model="formModel.aliyun.access_key_secret" placeholder="" style="width: 60%"/>
              <template #extra>
                <div>AccessKey Secret 在 [ 阿里云 > 个人中心 > AccessKey 管理 ] 设置和获取</div>
              </template>
            </a-form-item>
            <a-form-item field="aliyun.bucket" label="Bucket名称" label-col-flex="120px">
              <a-input v-model="formModel.aliyun.bucket" placeholder="" style="width: 60%"/>
              <template #extra>
                <div>Bucket 名称 在 [ 阿里云 > 对象存储 > Bucket 列表 ] 获取</div>
              </template>
            </a-form-item>
            <a-form-item field="aliyun.endpoint" label="Endpoint地域节点" label-col-flex="120px">
              <a-input v-model="formModel.aliyun.endpoint" placeholder="" style="width: 60%"/>
              <template #extra>
                <div>Endpoint（地域节点） 在 [ 阿里云 > 对象存储 > Bucket 列表 > Bucket 概览 ] 获取</div>
              </template>
            </a-form-item>
            <a-form-item field="aliyun.bucket_domain" label="Bucket域名" label-col-flex="120px">
              <a-input v-model="formModel.aliyun.bucket_domain" placeholder="" style="width: 60%"/>
              <template #extra>
                <div>Bucket 域名 在 [ 阿里云 > 对象存储 > Bucket 列表 > Bucket 概览 ] 获取</div>
              </template>
            </a-form-item>
          </template>
          <template v-else>
            <a-form-item label="" label-col-flex="120px">
              <a-card title="">
                文件将存储在本地服务器，默认保存在 public/storage 目录，文件以 hash 命名。<br />
                文件存储的目录需要有读写权限（777），有足够的存储空间。
              </a-card>
            </a-form-item>
          </template>
        </a-tab-pane>

        <a-tab-pane key="2" title="上传限制">
          <a-form-item field="image_size" label="图片大小" label-col-flex="120px">
            <a-input v-model="formModel.image_size" placeholder="" allow-clear style="width: 40%">
              <template #append>KB</template>
            </a-input>
            <span :style="{marginLeft:'10px'}">允许上传的图片大小，单位 KB</span>
          </a-form-item>
          <a-form-item field="image_ext" label="图片格式" label-col-flex="120px">
            <a-input v-model="formModel.image_ext" placeholder="" allow-clear style="width: 40%">
            </a-input>
            <span :style="{marginLeft:'10px'}">允许上传的图片后缀，逗号,隔开</span>
          </a-form-item>
          <a-form-item field="video_size" label="视频大小" label-col-flex="120px">
            <a-input v-model="formModel.video_size" placeholder="" allow-clear style="width: 40%">
              <template #append>KB</template>
            </a-input>
            <span :style="{marginLeft:'10px'}">允许上传的视频大小，单位 KB</span>
          </a-form-item>
          <a-form-item field="video_ext" label="视频格式" label-col-flex="120px">
            <a-input v-model="formModel.video_ext" placeholder="" allow-clear style="width: 40%">
            </a-input>
            <span :style="{marginLeft:'10px'}">允许上传的视频后缀，逗号,隔开</span>
          </a-form-item>
          <a-form-item field="audio_size" label="音频大小" label-col-flex="120px">
            <a-input v-model="formModel.audio_size" placeholder="" allow-clear style="width: 40%">
              <template #append>KB</template>
            </a-input>
            <span :style="{marginLeft:'10px'}">允许上传的音频大小，单位 KB</span>
          </a-form-item>
          <a-form-item field="audio_ext" label="音频格式" label-col-flex="120px">
            <a-input v-model="formModel.audio_ext" placeholder="" allow-clear style="width: 40%">
            </a-input>
            <span :style="{marginLeft:'10px'}">允许上传的音频后缀，逗号,隔开</span>
          </a-form-item>
          <a-form-item field="file_size" label="其它文件大小" label-col-flex="120px">
            <a-input v-model="formModel.file_size" placeholder="" allow-clear style="width: 40%">
              <template #append>KB</template>
            </a-input>
            <span :style="{marginLeft:'10px'}">允许上传的其它文件大小，单位 KB</span>
          </a-form-item>
          <a-form-item field="file_ext" label="其它文件格式" label-col-flex="120px">
            <a-input v-model="formModel.file_ext" placeholder="" allow-clear style="width: 40%">
            </a-input>
            <span :style="{marginLeft:'10px'}">允许上传的其它文件后缀，逗号,隔开</span>
          </a-form-item>
        </a-tab-pane>
      </a-tabs>
      <a-form-item label="" label-col-flex="226px">
        <a-space>
          <a-button type="primary" @click="submit">
            <icon-send /> 保存
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';

  import useLoading from '@/hooks/loading';
  import { apiUploadConfig } from '@/api/setting';

  const { loading, setLoading } = useLoading(true);
  const baseFormModel = {
    id: '',
    storage: 'local',
    qiniu: {
      accesskey: '',
      secretkey: '',
      bucket: '',
      url: '',
    },
    aliyun: {
      access_key_id: '',
      access_key_secret: '',
      bucket: '',
      endpoint: '',
      bucket_domain: '',
    },

    image_size: 0,
    image_ext: '',
    video_size: 0,
    video_ext: '',
    audio_size: 0,
    audio_ext: '',
    file_size: 0,
    file_ext: '',
  };
  const formRef = ref<FormInstance>();
  const formModel = ref<any>(baseFormModel);

  const storages = ref<any>([]);

  const rules = {
    // qiniu: {
    //   accesskey: [
    //     {required: true, message: 'AccessKey不能为空'},
    //   ],
    //   secretkey: [
    //     {required: true, message: 'SecretKey不能为空'},
    //   ],
    //   bucket: [
    //     {required: true, message: '空间名称不能为空'},
    //   ],
    //   url: [
    //     {required: true, message: '外链域名不能为空'},
    //   ],
    // },
    'qiniu.accesskey': [
      {required: true, message: 'AccessKey不能为空'},
    ],
    'qiniu.secretkey': [
      {required: true, message: 'SecretKey不能为空'},
    ],
    'qiniu.bucket': [
      {required: true, message: '空间名称不能为空'},
    ],
    'qiniu.url': [
      {required: true, message: '外链域名不能为空'},
    ],
  };

  const fetchData = async () => {
    try {
      const { data } = await apiUploadConfig();
      storages.value = data.storages;
      formModel.value = data.config;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  // 提交
  const submit = async () => {
    try {
      const ruleRes = await formRef.value?.validate();
      if (!ruleRes) {
        setLoading(true);
        await apiUploadConfig(formModel.value, 'post');
      }
    } catch (err) {
      setLoading(false);
    } finally {
      setLoading(false);
    }
  };

  // 存储方式选择
  const storageChange = async () => {
    await formRef.value?.clearValidate();
  };

  fetchData();
</script>

<style scoped lang="less"></style>
